import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-clock',
  templateUrl: './clock.component.html',
  styleUrls: ['./clock.component.css']
})
export class ClockComponent implements OnInit {

  constructor(public elementRef: ElementRef) { }

  ngOnInit() {
  }
  ngAfterViewInit(): void {
    const deg = 6;
    const hr = this.elementRef.nativeElement.querySelector("#hr");
    const mn = this.elementRef.nativeElement.querySelector("#mn");
    const sc = this.elementRef.nativeElement.querySelector("#sc");
    setInterval(() => {
      let day = new Date();
      let hh = day.getHours() * 30;
      let mm = day.getMinutes() * deg;
      let ss = day.getSeconds() * deg;
      
      hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)`;
      mn.style.transform = `rotateZ(${mm}deg)`;
      sc.style.transform = `rotateZ(${ss}deg)`;
    })

  }
}
